<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="A fully featured admin theme which can be used to build CRM, CMS, etc.">
        <meta name="author" content="Coderthemes">

        <!-- App Favicon -->
        <link rel="shortcut icon" href="assets/images/favicon.ico">

        <!-- App title -->
        <title>Uplon - Responsive Admin Dashboard Template</title>

        <!-- Switchery css -->
        <link href="assets/plugins/switchery/switchery.min.css" rel="stylesheet" />

        <!-- Bootstrap CSS -->
        <link href="assets/css/bootstrap.min.css" rel="stylesheet" type="text/css" />

        <!-- App CSS -->
        <link href="assets/css/style.css" rel="stylesheet" type="text/css" />

        <!-- HTML5 Shiv and Respond.js IE8 support of HTML5 elements and media queries -->
        <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
        <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
        <![endif]-->
        <!-- Modernizr js -->
        <script src="assets/js/modernizr.min.js"></script>

    </head>


    <body class="fixed-left" id="do-nicescrol">
        <div class="row">
            <div class="col-12">
                <div class="card-box">

                    <div class="row">
                        <div class="col-sm-12 col-xs-12 col-md-6">

                            <h4 class="header-title m-t-0">基本形式</h4>
                            <p class="text-muted font-13 m-b-10">
                                Parsley 是一个JavaScript表单验证库. 它可以帮助您在发送表单到服务器之前向用户提供表单提交的反馈.
                            </p>

                            <div class="p-20">
                                <form action="#" data-parsley-validate novalidate>
                                    <div class="form-group">
                                        <label for="userName">用户姓名<span class="text-danger">*</span></label>
                                        <input type="text" name="nick" parsley-trigger="change" required
                                               placeholder="Enter user name" class="form-control" id="userName">
                                    </div>
                                    <div class="form-group">
                                        <label for="emailAddress">信箱地址<span class="text-danger">*</span></label>
                                        <input type="email" name="email" parsley-trigger="change" required
                                               placeholder="Enter email" class="form-control" id="emailAddress">
                                    </div>
                                    <div class="form-group">
                                        <label for="pass1">密码<span class="text-danger">*</span></label>
                                        <input id="pass1" type="password" placeholder="Password" required
                                               class="form-control">
                                    </div>
                                    <div class="form-group">
                                        <label for="passWord2">确认密码 <span class="text-danger">*</span></label>
                                        <input data-parsley-equalto="#pass1" type="password" required
                                               placeholder="Password" class="form-control" id="passWord2">
                                    </div>
                                    <div class="form-group">
                                        <div class="checkbox">
                                            <input id="remember-1" type="checkbox">
                                            <label for="remember-1"> 记住我 </label>
                                        </div>
                                    </div>

                                    <div class="form-group text-right m-b-0">
                                        <button class="btn btn-primary waves-effect waves-light" type="submit">
                                            按钮
                                        </button>
                                        <button type="reset" class="btn btn-secondary waves-effect m-l-5">
                                            取消
                                        </button>
                                    </div>

                                </form>
                            </div>

                        </div>

                        <div class="col-sm-12 col-xs-12 col-md-6">
                            <h4 class="header-title m-t-0">水平表</h4>
                            <p class="text-muted font-13 m-b-10">
                                Parsley 是一个JavaScript表单验证库. 它可以帮助您在发送表单到服务器之前向用户提供表单提交的反馈.
                            </p>

                            <div class="p-20">
                                <form role="form" data-parsley-validate novalidate>
                                    <div class="form-group row">
                                        <label for="inputEmail3" class="col-sm-4 form-control-label">邮箱<span class="text-danger">*</span></label>
                                        <div class="col-sm-7">
                                            <input type="email" required parsley-type="email" class="form-control"
                                                   id="inputEmail3" placeholder="Email">
                                        </div>
                                    </div>
                                    <div class="form-group row">
                                        <label for="hori-pass1" class="col-sm-4 form-control-label">密码<span class="text-danger">*</span></label>
                                        <div class="col-sm-7">
                                            <input id="hori-pass1" type="password" placeholder="Password" required
                                                   class="form-control">
                                        </div>
                                    </div>
                                    <div class="form-group row">
                                        <label for="hori-pass2" class="col-sm-4 form-control-label">确认密码
                                            <span class="text-danger">*</span></label>
                                        <div class="col-sm-7">
                                            <input data-parsley-equalto="#hori-pass1" type="password" required
                                                   placeholder="Password" class="form-control" id="hori-pass2">
                                        </div>
                                    </div>

                                    <div class="form-group row">
                                        <label for="webSite" class="col-sm-4 form-control-label">网址<span class="text-danger">*</span></label>
                                        <div class="col-sm-7">
                                            <input type="url" required parsley-type="url" class="form-control"
                                                   id="webSite" placeholder="URL">
                                        </div>
                                    </div>
                                    <div class="form-group row">
                                        <div class="col-sm-8 col-sm-offset-4">
                                            <div class="checkbox">
                                                <input id="remember-2" type="checkbox">
                                                <label for="remember-2"> 记住我 </label>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group row">
                                        <div class="col-sm-8 col-sm-offset-4">
                                            <button type="submit" class="btn btn-primary waves-effect waves-light">
                                                登记
                                            </button>
                                            <button type="reset"
                                                    class="btn btn-secondary waves-effect m-l-5">
                                                取消
                                            </button>
                                        </div>
                                    </div>
                                </form>
                            </div>

                        </div>
                    </div>
                    <!-- end row -->

                    <div class="row m-t-50">
                        <div class="col-sm-6 col-xs-12 m-t-20">
                            <h4 class="header-title m-t-0">验证类型</h4>
                            <p class="text-muted font-13 m-b-10">
                                Parsley 是一个JavaScript表单验证库. 它可以帮助您在发送表单到服务器之前向用户提供表单提交的反馈.
                            </p>

                            <div class="p-20">
                                <form class="form-horizontal " action="#">
                                    <div class="form-group">
                                        <label>要求</label>
                                        <input type="text" class="form-control" required
                                               placeholder="Type something"/>
                                    </div>


                                    <div class="form-group">
                                        <label>等于</label>
                                        <div>
                                            <input type="password" id="pass2" class="form-control" required
                                                   placeholder="Password"/>
                                        </div>
                                        <div class="m-t-10">
                                            <input type="password" class="form-control" required
                                                   data-parsley-equalto="#pass2"
                                                   placeholder="Re-Type Password"/>
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <label>电子邮箱</label>
                                        <div>
                                            <input type="email" class="form-control" required
                                                   parsley-type="email" placeholder="Enter a valid e-mail"/>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label>跳转地址</label>
                                        <div>
                                            <input parsley-type="url" type="url" class="form-control"
                                                   required placeholder="URL"/>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label>数字</label>
                                        <div>
                                            <input data-parsley-type="digits" type="text"
                                                   class="form-control" required
                                                   placeholder="Enter only digits"/>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label>数字</label>
                                        <div>
                                            <input data-parsley-type="number" type="text"
                                                   class="form-control" required
                                                   placeholder="Enter only numbers"/>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label>字母数字</label>
                                        <div>
                                            <input data-parsley-type="alphanum" type="text"
                                                   class="form-control" required
                                                   placeholder="Enter alphanumeric value"/>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label>文本区域</label>
                                        <div>
                                            <textarea required class="form-control"></textarea>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <div>
                                            <button type="submit" class="btn btn-primary waves-effect waves-light">
                                                按钮
                                            </button>
                                            <button type="reset" class="btn btn-secondary waves-effect m-l-5">
                                                取消
                                            </button>
                                        </div>
                                    </div>
                                </form>
                            </div>

                        </div>

                        <div class="col-sm-6 col-xs-12 m-t-20">
                            <h4 class="header-title m-t-0">范围验证</h4>
                            <p class="text-muted font-13 m-b-10">
                                Parsley 是一个JavaScript表单验证库. 它可以帮助您在发送表单到服务器之前向用户提供表单提交的反馈.
                            </p>

                            <div class="p-20">
                                <form action="#">

                                    <div class="form-group">
                                        <label>最小长度</label>
                                        <div>
                                            <input type="text" class="form-control" required
                                                   data-parsley-minlength="6" placeholder="Min 6 chars."/>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label>最大长度</label>
                                        <div>
                                            <input type="text" class="form-control" required
                                                   data-parsley-maxlength="6" placeholder="Max 6 chars."/>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label>长度范围</label>
                                        <div>
                                            <input type="text" class="form-control" required
                                                   data-parsley-length="[5,10]"
                                                   placeholder="Text between 5 - 10 chars length"/>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label>最小值</label>
                                        <div>
                                            <input type="text" class="form-control" required
                                                   data-parsley-min="6" placeholder="Min value is 6"/>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label>最大值</label>
                                        <div>
                                            <input type="text" class="form-control" required
                                                   data-parsley-max="6" placeholder="Max value is 6"/>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label>值范围</label>
                                        <div>
                                            <input class="form-control" required type="text range" min="6"
                                                   max="100" placeholder="Number between 6 - 100"/>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label>正则表达式</label>
                                        <div>
                                            <input type="text" class="form-control" required
                                                   data-parsley-pattern="#[A-Fa-f0-9]{6}"
                                                   placeholder="Hex. Color"/>
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <label>最小检查</label>
                                        <div>
                                            <div class="checkbox checkbox-custom">
                                                <input id="checkbox1" type="checkbox"
                                                       data-parsley-multiple="groups"
                                                       data-parsley-mincheck="2">
                                                <label for="checkbox1"> And this </label>
                                            </div>
                                            <div class="checkbox checkbox-pink">
                                                <input id="checkbox2" type="checkbox"
                                                       data-parsley-multiple="groups"
                                                       data-parsley-mincheck="2">
                                                <label for="checkbox2"> Can't check this </label>
                                            </div>
                                            <div class="checkbox checkbox-success">
                                                <input id="checkbox3" type="checkbox"
                                                       data-parsley-multiple="groups"
                                                       data-parsley-mincheck="2" required>
                                                <label for="checkbox3"> This too </label>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label>最大检查</label>
                                        <div>
                                            <div class="checkbox checkbox-pink">
                                                <input id="checkbox4" type="checkbox"
                                                       data-parsley-multiple="group1">
                                                <label for="checkbox4"> And this </label>
                                            </div>
                                            <div class="checkbox checkbox-primary">
                                                <input id="checkbox5" type="checkbox"
                                                       data-parsley-multiple="group1">
                                                <label for="checkbox5"> Can't check this </label>
                                            </div>
                                            <div class="checkbox checkbox-success">
                                                <input id="checkbox6" type="checkbox"
                                                       data-parsley-multiple="group1"
                                                       data-parsley-maxcheck="1">
                                                <label for="checkbox6"> This too </label>
                                            </div>

                                        </div>
                                    </div>

                                    <div class="form-group m-b-0">
                                        <div>
                                            <button type="submit" class="btn btn-primary waves-effect waves-light">
                                                Submit
                                            </button>
                                            <button type="reset" class="btn btn-secondary waves-effect m-l-5">
                                                Cancel
                                            </button>
                                        </div>
                                    </div>
                                </form>
                            </div>

                        </div>

                    </div>
                    <!-- end row -->

                </div>
            </div><!-- end col-->

        </div>
        <!-- end row -->

    </div>
    <!-- END wrapper -->


        <script>
            var resizefunc = [];
        </script>

        <!-- jQuery  -->
        <script src="assets/js/jquery.min.js"></script>
        <script src="assets/js/tether.min.js"></script><!-- Tether for Bootstrap -->
        <script src="assets/js/bootstrap.min.js"></script>
        <script src="assets/js/detect.js"></script>
        <script src="assets/js/fastclick.js"></script>
        <script src="assets/js/jquery.blockUI.js"></script>
        <script src="assets/js/waves.js"></script>
        <script src="assets/js/jquery.nicescroll.js"></script>
        <script src="assets/js/jquery.scrollTo.min.js"></script>
        <script src="assets/js/jquery.slimscroll.js"></script>
        <script src="assets/plugins/switchery/switchery.min.js"></script>

        <!-- Validation js (Parsleyjs) -->
        <script type="text/javascript" src="assets/plugins/parsleyjs/parsley.min.js"></script>

        <!-- App js -->
        <script src="assets/js/jquery.core.js"></script>
        <script src="assets/js/jquery.app.js"></script>

        <script type="text/javascript">
            $(document).ready(function() {
                $('form').parsley();
            });

            $(document).ready(
                 function() { 
                  $("#do-nicescrol").niceScroll({oneaxismousemode: false,cursorcolor: "#999",horizrailenabled: false});
                 }
            );
        
        </script>

    </body>
</html>